import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import HeaderBar from "../../components/header/HeaderBar";
import SearchBox from "../../components/header/SearchBox";
import LiliFooter from "../../components/footer";
import VideoCard from "../../components/layout/VideoCard";
import { totalVideos } from "../../utils/utils";

import "./search.css";

function LiliSearch({ diff, loginAction }) {
  const { id } = useParams();
  const [outerSearchList, setOuterSearchList] = useState([]);
  const [outerSearchField, setOuterSearchField] = useState(id);

  useEffect(() => {
    if (diff == 1) {
      document.querySelector(".search .video-i-wrapper").setAttribute("class", "video-i-wrapper small")
    } else if (diff == 0) {
      document.querySelector(".search .video-i-wrapper").setAttribute("class", "video-i-wrapper")
    }
  }, [diff])

  useEffect(() => {
    setOuterSearchList(Object.entries(totalVideos).filter(([key, value], index) => {
      return value.title.includes(id);
    }));
  }, [])

  return (
    <div className="search">
      <HeaderBar subClass={" fixed-header"} isSearchBoxVisible={false} loginAction={loginAction} />
      <div className="search-layout">
        <div className="search-header">
          <div className="searchbox-container">
            <SearchBox oldSearchField={id} setOuterSearchList={setOuterSearchList} setOuterSearchField={setOuterSearchField} />
          </div>
        </div>
        <div className="splite-line"></div>
        <div className="search-content">
          <div className="search-page">
            <div className="video-i-wrapper">
              <div className="video-list row">
                {outerSearchList.map((value, index) => {
                  return (
                    <div className="video-list-item" key={index}>
                      <VideoCard
                        plays={value[1].plays}
                        danmakus={value[1].danmakus}
                        duration={value[1].duration}
                        BV={value[0]}
                        title={value[1].title}
                        author={value[1].author}
                        date={value[1].date}
                        pic={value[1].pic}
                        searchField={outerSearchField}
                      />
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      </div>
      <LiliFooter />
    </div>
  )
}

export default LiliSearch;